﻿@{
    Layout = "../Shared/_MobileLayout.cshtml";
}
@section title
{
我的优惠卷
}
@section pagetitle
{
我的优惠卷
}
<div class="userCenterHeader">
    <span class="iconWrapper">
        <img src="~/Themes/RongJi/Style/base/imgs/icon_cang.png">
    </span>
    <h3>我的优惠卷</h3>
    <br class="clearfix">
</div>
@if (Model.GiftCardList == null)
{ 
     <div class="box">
        <div id="empty" style="text-align: center">
            <p>@Html.Raw("暂无优惠卷")</p>
            <div class="btn btn-default">
                <a href="/Home" class="empty_go_main">去逛逛</a>
            </div>
        </div>
    </div>
}
else
{
    <div class="box">
        <div class="panel">
            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a data-toggle="tab" href="#all" id="noUse">未使用</a></li>
                <li class=""><a data-toggle="tab" href="#get" id="use">已使用</a></li>
                <li class=""><a data-toggle="tab" href="#using" id="expiration">已过期</a></li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade active in">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>优惠券号</th>
                                <th>限定商品</th>
                                <th>总额</th>
                                <th>过期日期</th>
                            </tr>
                        </thead>
                        <tbody id="myGiftCardList">
                            @foreach (var giftCard in Model.GiftCardList)
                            {
                                <tr height="380">
                                    <td>@giftCard.GiftCardNumber</td>
                                    <th>@giftCard.ProductNameForamt</th>
                                    <td>@giftCard.TotalAmount</td>
                                    <td>@giftCard.ExpirationForamt</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="showMore" page="1" status="0">
                更多...
            </div>
        </div>
    </div>
}
@section footer
{
    <script>
        $(function() {
            var totalPage = @Model.TotalNoUsePage;
            var isloading = false;
            var counter = 1;

            //让toolbar选中
            var $homeImg = $("#homeImg");
            var $categoryImg = $("#categoryImg");
            var $myaccountImg = $("#myaccountImg");
            var $searchImg = $("#searchImg");
            $homeImg.attr("src", "/Themes/RongJi/Style/base/imgs/f10.png");
            $categoryImg.attr("src", "/Themes/RongJi/Style/base/imgs/f2.png");
            $myaccountImg.attr("src", "/Themes/RongJi/Style/base/imgs/f3_c.png");
            $searchImg.attr("src", "/Themes/RongJi/Style/base/imgs/f4.png");

            //当只有一页数据时'更多'不需要显示出来
            if(totalPage == 1) {
                $("#showMore").hide();
            }

            /*---------------------显示对应类型的的优惠券--------------------*/
            $("#noUse").click(function () {
                totalPage = @Model.TotalNoUsePage;
                getGiftCard(0, '未使用',totalPage);
            });

            //得到已使用的优惠券
            $("#use").click(function () {
                totalPage = @Model.TotalUsePage;
                getGiftCard(2, '已使用',totalPage);
            });

            //得到已过期的优惠券
            $("#expiration").click(function () {
                totalPage = @Model.TotalExpirationPage;
                getGiftCard(4, '已过期',totalPage);
            });

            /*---------------------得到优惠券--------------------*/
            function getGiftCard(status,statusText, totalPage) {
                $("#myGiftCardList").empty();
                $('#showMore').attr('page',1);
                $('#showMore').attr('status',status);
                if(totalPage <= 1){
                    $("#showMore").hide();
                }
                else{
                    $("#showMore").show().html('更多...');
                }
                $.ajax({
                    type: "GET",
                    url: "MyGiftCardByAjaxRequest?status=" + status + "&pageIndex=0",
                    success: function (response) {                     
                        $("#myGiftCardList").append(response);
                    },
                    error:function(err){
                        alert(err.responseText);
                    }
                });
            }

            /*---------------------得到下页优惠券数据--------------------*/
            if(totalPage > 1) {
                $(window).bind("scroll", function() {
                    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                        var pageIndex = $('#showMore').attr('page');     
                        var status = $('#showMore').attr('status');
                        $('#showMore').show().html('加载中...');
                        if(pageIndex >= totalPage) {
                            $("#showMore").show().html('加载完毕').delay(2300).slideUp(1600);
                            return;
                        }
                        if(isloading) {
                            return;
                        }
                        isloading = true;
                        $.ajax({
                            type: "GET",
                            url:  "MyGiftCardByAjaxRequest?status=" + status + "&pageIndex=" +  pageIndex,
                            success: function(response){
                                isloading = false;
                                $('#showMore').attr('page',parseInt(pageIndex)+1);
                                //$("#myGiftCardList").append(response);
                                $("#myGiftCardList").append("<tbody id='tbody" + counter + "' style='margin-top:100px;opacity:0.3'></tbody>");
                                $("#tbody" + counter).append(response).animate({ opacity: '1', marginTop: 0 }, 2000);
                                counter++;
                            },
                            error:function(err){
                                alert(err.responseText);
                            }
                        });
                    }
                });
            }
        });
    </script>
}


